<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div style="width: 200px;height: 200px">
    <el-card>
      <h1>卡片</h1>
    </el-card>
</div>
  <el-row gutter="10">
    <el-col span="4" v-for="item in 6">
    <el-card>
      <h1>卡片{{item}}</h1>
    </el-card>
    </el-col>
  </el-row>
  <h1>商品列表</h1>
  <el-row gutter="20">
    <el-col span="6" v-for="product in arr">
      <el-card>
        <img :src="product.url" width="100%">
        <p>{{product.title}}</p>
        <p><span>价格：{{product.price}}</span>
            <span style="float: right">销量：{{product.saleCount}}</span></p>
      </el-card>
    </el-col>
  </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
          arr:[{title:"牛仔裤",url:"imgs/a.jpg",price:500,saleCount:25},
            {title:"白色卫衣",url:"imgs/b.jpg",price:200,saleCount:18},
            {title:"灰色运动裤",url:"imgs/c.jpg",price:300,saleCount:30},
            {title:"黑色帽衫",url:"imgs/d.jpg",price:100,saleCount:133}]
      }
    },
    methods: {

    }
  })
</script>
</html>